import React, { FC, useState, useEffect } from 'react';
import { ReactSortable } from 'react-sortablejs';
import Chart from './Chart';

interface ItemType {
  id: number;
  name: string;
}

const Index: FC = () => {
  const [state, setState] = useState<ItemType[]>([
    { id: 1, name: 'shrek' },
    { id: 2, name: 'fiona' },
  ]);

  useEffect(() => {
    setTimeout(() => {
      setState((origin) => [...origin]);
    }, 2000);
  }, []);

  const onEnd = (evt) => {
    console.log(evt);
  };

  return (
    <>
      <ReactSortable onEnd={onEnd} list={state} setList={setState}>
        {state.map((item) => (
          <span key={item.id}>{item.name}</span>
        ))}
      </ReactSortable>
      <Chart />
    </>
  );
};

export default Index;
